<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style lang="stylus">
@import './assets/style/mixin.styl';

.resume-container
  position: fixed
  left: 0
  right: 0
  top: 0
  bottom: 0
  width: 100%
  height: 100%
  background: lightslategray
  overflow: hidden
  overflow-y: auto
  scrollBar()

@media screen and (min-width: 768px) {
  .resume-container {
    overflow: visible;
  }
}

@media screen and (min-width: 992px) {
  .resume-container {
    .tips-wrapper {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 50px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor:pointer;
      i {
        font-size: 24px;
        transition: all 0.6s ease;
        color: #778899;
      }
      .anime-tips-flash {
        animation: tips_flash 3s ease infinite alternate;
      }
    }
  }
}

@keyframes tips_flash {
  0% {
    color: #666;
  }

  50% {
    color: #aaa;
  }

  100% {
    color: #fff;
  }
}
</style>
